<template>
    <div class="h100">
      <app-head :title="title"></app-head>
      <div >
        <div class="head flex_b">
            <div class="head_img ">
              <img :src='datas.headImg' alt="">
            </div>
          <div style="margin-top: 10px;margin-left: 16px">
              <h3 style="font-size: 20px;color: #444444;height: 28px;text-align: left">{{datas.name}}</h3>
            <p style="color: #777;font-size: 13px;text-align: left">经验值：{{datas.experValue}}</p>
          </div>
        </div>
        <div style="margin-top: 40px">
          <p class="r_t">操作提示</p>

           <ul class="ul_i">
             <li>每次训练将消耗10经验值 </li>
             <li>系统随机抽取10道题 </li>
             <li>每道题最多有20秒答题时间  </li>
             <li>答对可获得与剩余答题时间相同数量的经验值  </li>
             <li>答题完毕，将获得经验值奖  </li>
           </ul>
        </div>
        <div>
          <router-link to="/questionStep2">
            <a class="btn_d" href="javascript:void(0)">进入答题</a>
          </router-link>
        </div>
      </div>
    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "QuestionStep1",
      components:{
        AppHead
      },

        data () {
          return {
            title: '问答比拼',
            datas:{}
          }
        },
      mounted:function () {
        this.init()
      },
      methods:{
        init:function () {
          var that = this
          this.$http({
            method: 'get',
            url: '/user/getuser',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {

            console.log(res.data.datas)
            that.datas = res.data.datas[0]
          }).catch(function (error) {

          })
        }
      }
    }
</script>

<style scoped lang="less">
 .head{
   width: 258px;
   border-radius:0px 100px 100px 0px;
   height: 88px;
   margin-top: 24px;
   box-shadow:0px 0px 6px 0px rgba(0,0,0,0.3);
   /*align-items: center;*/

   .head_img{
     width: 68px;
     height: 68px;
     border-radius: 50%;
     overflow: hidden;
     margin-top: 10px;
     margin-left: 24px;
     img{
       width: 100%;
       height: 100%;
     }
   }
 }
 .r_t{
   font-size: 15px;
   color:#468EE5 ;
   text-align: left;
   margin-left: 25px;
 }
  .ul_i{

    li{
      line-height:27px;
      padding-left: 0;
      opacity: .9;
      text-align: left;color: #666666;
      font-size: 15px;
    }
  }
.btn_d{
  width:327px;
  height:44px;
  background:rgba(74,144,226,1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
  border-radius:8px;
  background: #4A90E2;
  font-size: 17px;
  text-align: center;
  line-height: 44px;
  color: #fff;display: inline-block;
  margin-top: 48px;
}
</style>
